<script setup lang="ts">
import { RadioGroup } from "@ark-ui/vue/radio-group";
</script>

<template>
  <RadioGroup.Root class="flex gap-3" default-value="red">
    <RadioGroup.Item value="red" class="cursor-pointer">
      <RadioGroup.ItemControl
        class="group size-6 border-2 border-red-500 rounded-full data-[state=checked]:border-red-500 hover:border-red-500 data-focus:ring-2 data-focus:ring-red-500/50 transition-all duration-200 flex items-center justify-center bg-red-500"
      >
        <svg
          width="12"
          height="12"
          viewBox="0 0 12 12"
          fill="currentcolor"
          xmlns="http://www.w3.org/2000/svg"
          class="opacity-0 group-data-[state=checked]:opacity-100 transition-opacity text-white"
        >
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
      </RadioGroup.ItemControl>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>

    <RadioGroup.Item value="blue" class="cursor-pointer">
      <RadioGroup.ItemControl
        class="group size-6 border-2 border-blue-500 rounded-full data-[state=checked]:border-blue-500 hover:border-blue-500 data-focus:ring-2 data-focus:ring-blue-500/50 transition-all duration-200 flex items-center justify-center bg-blue-500"
      >
        <svg
          width="12"
          height="12"
          viewBox="0 0 12 12"
          fill="currentcolor"
          xmlns="http://www.w3.org/2000/svg"
          class="opacity-0 group-data-[state=checked]:opacity-100 transition-opacity text-white"
        >
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
      </RadioGroup.ItemControl>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>

    <RadioGroup.Item value="green" class="cursor-pointer">
      <RadioGroup.ItemControl
        class="group size-6 border-2 border-green-500 rounded-full data-[state=checked]:border-green-500 hover:border-green-500 data-focus:ring-2 data-focus:ring-green-500/50 transition-all duration-200 flex items-center justify-center bg-green-500"
      >
        <svg
          width="12"
          height="12"
          viewBox="0 0 12 12"
          fill="currentcolor"
          xmlns="http://www.w3.org/2000/svg"
          class="opacity-0 group-data-[state=checked]:opacity-100 transition-opacity text-white"
        >
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
      </RadioGroup.ItemControl>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>

    <RadioGroup.Item value="yellow" class="cursor-pointer">
      <RadioGroup.ItemControl
        class="group size-6 border-2 border-yellow-500 rounded-full data-[state=checked]:border-yellow-500 hover:border-yellow-500 data-focus:ring-2 data-focus:ring-yellow-500/50 transition-all duration-200 flex items-center justify-center bg-yellow-500"
      >
        <svg
          width="12"
          height="12"
          viewBox="0 0 12 12"
          fill="currentcolor"
          xmlns="http://www.w3.org/2000/svg"
          class="opacity-0 group-data-[state=checked]:opacity-100 transition-opacity text-white"
        >
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
      </RadioGroup.ItemControl>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>

    <RadioGroup.Item value="purple" class="cursor-pointer">
      <RadioGroup.ItemControl
        class="group size-6 border-2 border-purple-500 rounded-full data-[state=checked]:border-purple-500 hover:border-purple-500 data-focus:ring-2 data-focus:ring-purple-500/50 transition-all duration-200 flex items-center justify-center bg-purple-500"
      >
        <svg
          width="12"
          height="12"
          viewBox="0 0 12 12"
          fill="currentcolor"
          xmlns="http://www.w3.org/2000/svg"
          class="opacity-0 group-data-[state=checked]:opacity-100 transition-opacity text-white"
        >
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
      </RadioGroup.ItemControl>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>

    <RadioGroup.Item value="pink" class="cursor-pointer">
      <RadioGroup.ItemControl
        class="group size-6 border-2 border-pink-500 rounded-full data-[state=checked]:border-pink-500 hover:border-pink-500 data-focus:ring-2 data-focus:ring-pink-500/50 transition-all duration-200 flex items-center justify-center bg-pink-500"
      >
        <svg
          width="12"
          height="12"
          viewBox="0 0 12 12"
          fill="currentcolor"
          xmlns="http://www.w3.org/2000/svg"
          class="opacity-0 group-data-[state=checked]:opacity-100 transition-opacity text-white"
        >
          <circle cx="6" cy="6" r="6"></circle>
        </svg>
      </RadioGroup.ItemControl>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>
  </RadioGroup.Root>
</template>
